<template>
	<div class="overview" id="overview">
		<div class="st_t1">
			<div class="zc_zl">资产总览</div>
		</div>

		<!--<button v-on:click="ddd">dianji</button>
		<div>
			<span v-if="index ==1">22222</span>
			<span v-if="!span_tag">11111</span>
		<div>-->
		<div class="assets_nav">
			<ul>
				<li class="title">
					<div>币种</div>
					<div>可用</div>
					<div>冻结</div>
					<div>小计</div>
					<div>特仓成本</div>
					<div class="opreate">操作</div>
				</li>
				<li>
					<div>2222</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div class="opreate" style="color: #0093F1;">
						<a>充值</a> /
						<a>提现</a>
					</div>
				</li>
				<li>
					<div>2222</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div class="opreate">3423</div>
				</li>
				<li>
					<div>2222</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div class="opreate">3423</div>
				</li>
				<li>
					<div>2222</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div class="opreate">3423</div>
				</li>
			</ul>

		</div>

		<div class="st_t1">
			<span style="float: left;margin-top: 6px;font-size: 24px;">账户历史明细</span>
			<div style="text-align: right;">
				<input type="datetime" class="date-input1"></input>
				<span style="margin: 0 auto;">--</span>
				<input type="datetime" class="date-input2"></input>
				<span><img class='down_img' src="../../../static/imgs/down2.png"/></span>
			</div>
		</div>

		<div class="hislist">
			<ul>
				<li>全部</li>
				<li>充值</li>
				<li>提现</li>
				<li>活动</li>
			</ul>
		</div>

		<div class="data-list">
			<ul>
				<li class="datalist-title">
					<div class="list_date">时间</div>
					<div>操作类型</div>
					<div>资产类型</div>
					<div>操作金额</div>
					<div>本次结算金额</div>
					<div>上次估算金额</div>
				</li>
				<li>
					<div class="list_date">2sssss27</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
				</li>
				<li>
					<div class="list_date">2sssss27</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
					<div>3423</div>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'policy',
		computed: {},
		data() {
			return {
				title: '',
				span_tag: false,
				hq_etc: [{
					platform: '链行',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: '云币',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}, {
					platform: 'Bitfinex',
					lastPrice: '--.--',
					change: '--.--',
					highPrice: '--.--',
					lowPrice: '--.--',
					vol: '--.--'
				}],
			}
		}, //定义变量
		components: {}, //注册组件
		methods: { //方法都在这里
			ddd: function() {
				this.span_tag = this.span_tag ? false : true;
			}
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.overview {
		text-align: left;
		
		/*.st_z1 {
			
			background: #f4f4f4;
			width: 100%;
			text-align: left;
			font-size: 24px;
		}*/
		.st_t1 {
			padding: 9px 40px;
			background: #f4f4f4;
			width: 100%;
			text-align: left;
			font-size: 24px;
			.zc_zl{
				padding:5px 40px !important;
			}
		}
		/*资产总览*/
		.assets_nav ul {
			li {
				font-size: 14px;
				height: 65px;
				line-height: 65px;
				div {
					text-align: center;
					display: inline-block;
					width: 110px;
					margin-right: 15px;
				}
				.opreate {
					width: 312px;
					margin-right: 0px;
				}
			}
			li:hover {
				background: #F2F9FE;
			}
			.title {
				color: #9B9B9B;
				height: 40px;
				line-height: 40px;
				div {
					border-bottom: 3px solid #0093f1;
				}
			}
		}
		input {
			width: 200px;
			height: 40px;
		}
		.down_img {
			position: relative;
			top: 9px;
			height: 25px;
			width: 24px;
		}
		.hislist ul {
			margin-top: 20px;
			background: #f4f4f4;
			li {
				height: 40px;
				line-height: 40px;
				text-align: center;
				display: inline-block;
				width: 150px;
			}
			li:first-child {
				border-top: 3px solid #0093f1;
				background: none;
			}
		}
		.data-list ul {
			li {
				font-size: 14px;
				height: 65px;
				line-height: 65px;
				div {
					text-align: center;
					display: inline-block;
					width: 126px;
					margin-right: 4px;
				}
				.list_date {
					width: 280px;
				}
			}
			li:hover {
				background: #F2F9FE;
			}
			.datalist-title {
				color: #9B9B9B;
				height: 40px;
				line-height: 40px;
				div {
					border-bottom: 3px solid #0093f1;
				}
			}
			div:last-child{
				width: 131px;
			}
		}
	}
</style>